<template>
	<!-- 我 -->
	<view class="">
		<view class="status_title">
			<image class="status_left" src="../../static/list.png" @click="showDrawer('showLeft')" mode=""></image>
			<view class="status_right">
				<view class="box">
					<image src="../../static/图片.png" mode=""></image>
					<text>设置背景</text>
				</view>
				<image class="img" @click="shareToggle"  src="../../static/分享.png" mode=""></image>
			</view>
		</view>
		<view class="example-body">
			<uni-drawer ref="showLeft" mode="left" :width="280" @change="change($event,'showLeft')">
				<view class="close">
					<view class="">
						<image src="../../static/添加好友.png" mode=""></image>
						<text>发现好友</text>
					</view>
					<hr>
					<view class="">
						<image src="../../static/草稿箱.png" mode=""></image>
						<text>我的草稿</text>
					</view>
					<view class="">
						<image src="../../static/添加好友.png" mode=""></image>
						<text>创作中心</text>
					</view>
					<view class="">
						<image src="../../static/浏览记录.png" mode=""></image>
						<text>浏览记录</text>
					</view>
					<view class="">
						<image src="../../static/钱包.png" mode=""></image>
						<text>钱包</text>
					</view>
					<view class="">
						<image src="../../static/流量.png" mode=""></image>
						<text>免流量</text>
					</view>
					<view class="">
						<image src="../../static/礼物.png" mode=""></image>
						<text>好物体验</text>
					</view>
					<hr>
					<view class="">
						<image src="../../static/订单.png" mode=""></image>
						<text>订单</text>
					</view>
					<view class="">
						<image src="../../static/购物车3.png" mode=""></image>
						<text>购物车</text>
					</view>
					<view class="">
						<image src="../../static/我的卡卷.png" mode=""></image>
						<text>卡卷</text>
					</view>
					<view class="">
						<image src="../../static/心愿单.png" mode=""></image>
						<text>心愿单</text>
					</view>
					<view class="">
						<image src="../../static/会员.png" mode=""></image>
						<text>小红卡会员</text>
					</view>
					<hr>
					<view class="">
						<image src="../../static/小草.png" mode=""></image>
						<text>社区公约</text>
					</view>
					<view class="title">
						<view class="sigle-title">
							<view class="">
								<image src="../../static/设置.png" mode="aspectFit"></image>
							</view>
							<text>设置</text>
						</view>
						<view class="sigle-title">
							<view class="">
								<image src="../../static/客服.png" mode="aspectFit"></image>
							</view>
							<text>帮助与客服</text>
						</view>
						<view class="sigle-title">
							<view class="">
								<image src="../../static/扫码.png" mode="aspectFit"></image>
							</view>
							<text>扫一扫</text>
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
		<view class="box1">
			<view class="name">
				<image src="../../static/mm.png" mode=""></image>
				<view>
					<text>空城</text>
					<p>小红书号：245174026</p>
				</view>
			</view>
			<view class="name1">
				<text>向大家介绍一下自己</text>
				<view class="sex">
					<image src="../../static/男.png" mode=""></image>
					<view>
						<text>+ 添加生日、地区标签</text>
					</view>
				</view>
			</view>
			<view class="name2">
				<view class="num">
					<view>
						<p>4</p>
						<text>关注</text>
					</view>
					<view>
						<p>323</p>
						<text>粉丝</text>
					</view>
					<view>
						<p>245</p>
						<text>获赞与收藏</text>
					</view>
				</view>
				<view class="set">
					<view class="set1">
						<text>编辑资料</text>
					</view>
					<view class="set2">
						<image src="../../static/设置1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="box-aio">
							<view class="left">
								<view class="touxi" v-for="item in arrList" >
									<view class="tupian">
										<image :src="item.url"></image>
									</view>
									<view class="wenzi">
										<text>{{item.Text}}</text>
									</view>
									<view class="touxiang">
										<view class="tou-img">
											<image :src="item.url2"></image>
											<text>{{item.Text2}}</text>
										</view>
										<view class="bixin">
											<image :src="item.url3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.num}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="touxi-ao" v-for="item in ArrList">
									<view class="tupian-pian">
										<image :src="item.src"></image>
									</view>
									<view class="wenzi-zi">
										<text>{{item.Title}}</text>
									</view>
									<view class="xiangtou">
										<view class="img-xiang">
											<image :src="item.src2"></image>
											<text>{{item.Title2}}</text>
										</view>
										<view class="xinbi">
											<image :src="item.src3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.Num}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="box-aio">
							<view class="left">
								<view class="touxi" v-for="item in arrList1">
									<view class="tupian">
										<image :src="item.url"></image>
									</view>
									<view class="wenzi">
										<text>{{item.Text}}</text>
									</view>
									<view class="touxiang">
										<view class="tou-img">
											<image :src="item.url2"></image>
											<text>{{item.Text2}}</text>
										</view>
										<view class="bixin">
											<image :src="item.url3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.num}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="touxi-ao" v-for="item in ArrList1">
									<view class="tupian-pian">
										<image :src="item.src"></image>
									</view>
									<view class="wenzi-zi">
										<text>{{item.Title}}</text>
									</view>
									<view class="xiangtou">
										<view class="img-xiang">
											<image :src="item.src2"></image>
											<text>{{item.Title2}}</text>
										</view>
										<view class="xinbi">
											<image :src="item.src3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.Num}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="current === 2">
						<view class="box-aio">
							<view class="left">
								<view class="touxi" v-for="item in arrList2" >
									<view class="tupian">
										<image :src="item.url"></image>
									</view>
									<view class="wenzi">
										<text>{{item.Text}}</text>
									</view>
									<view class="touxiang">
										<view class="tou-img">
											<image :src="item.url2"></image>
											<text>{{item.Text2}}</text>
										</view>
										<view class="bixin">
											<image :src="item.url3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.num}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="touxi-ao" v-for="item in ArrList2">
									<view class="tupian-pian">
										<image :src="item.src"></image>
									</view>
									<view class="wenzi-zi">
										<text>{{item.Title}}</text>
									</view>
									<view class="xiangtou">
										<view class="img-xiang">
											<image :src="item.src2"></image>
											<text>{{item.Title2}}</text>
										</view>
										<view class="xinbi">
											<image :src="item.src3" v-if="item.srcArr===false"
												@click="item.srcArr=!item.srcArr;item.Num++"></image>
											<image :src="item.src4" v-if="item.srcArr===true"
												@click="item.srcArr=!item.srcArr;item.Num--"></image>
											<text>{{item.Num}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		<view>
			<!-- 分享示例 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['笔记', '收藏', '赞过'],
				current: 0,
				activeColor: '#000000',
				styleType: 'text',
				arrList: [{
						srcArr: false,
						url: '/static/a1.png',
						Text: '秋冬复古电影感滤镜 . 一些回忆片段',
						url2: '/static/w6.png',
						Text2: '小瑶',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '6873'
					},
					{
						srcArr: false,
						url: '/static/o2.jpg',
						Text: '卡布奇洛玫瑰 | 巧克力泡泡 | 复古花束',
						url2: '/static/w8.png',
						Text2: 'FLOWER花样',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '234'
					}
				],
				ArrList: [
					{
						srcArr: false,
						src: '/static/o4.jpg',
						Title: '玫瑰过程图',
						src2: '/static/w9.png',
						Title2: '故渊',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '673'
					},
					{
						srcArr: false,
						src: '/static/o5.jpg',
						Title: '烫了个头发被问疯了!救命啊!中发一定要烫!!',
						src2: '/static/w12.png',
						Title2: '颜一妮',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '851'
					},
				],
				arrList1: [{
						srcArr: false,
						url: '/static/y1.jpg',
						Text: '零基础“小白兔”绘画第363天',
						url2: '/static/w6.png',
						Text2: '一坐一忘',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '9475'
					},
					{
						srcArr: false,
						url: '/static/y2.jpg',
						Text: '接天莲叶无穷碧',
						url2: '/static/mm.png',
						Text2: '江江',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '5737'
					},
				],
				ArrList1: [
					{
						srcArr: false,
						src: '/static/y5.jpg',
						Title: '手绘头像（原创)',
						src2: '/static/w9.png',
						Title2: 'ting ',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '742'
					},
					{
						srcArr: false,
						src: '/static/y6.jpg',
						Title: 'TD',
						src2: '/static/w12.png',
						Title2: '白敬亭',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '13万'
					},
				],
				arrList2: [{
						srcArr: false,
						url: '/static/y7.jpg',
						Text: '挑战一张封神',
						url2: '/static/w6.png',
						Text2: '海邪邪',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '4.7万'
					},
					{
						srcArr: false,
						url: '/static/y8.jpg',
						Text: '胶片感图片怎么p',
						url2: '/static/mm.png',
						Text2: '赛文七77',
						url3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						num: '9211'
					},
				],
				ArrList2: [{
						srcArr: false,
						src: '/static/y3.jpg',
						Title: '记鹿',
						src2: '/static/w7.png',
						Title2: '白鹿',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '4.4万'
					},
					{
						srcArr: false,
						src: '/static/y4.jpg',
						Title: '复古郁金香',
						src2: '/static/w9.png',
						Title2: 'MOSY',
						src3: '/static/收藏oo.png',
						src4: '/static/收藏o.png',
						Num: '5049'
					},
				]
			}
		},

		methods: {
			shareToggle() {
				this.$refs.share.open()
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "me.scss"
</style>
// <style>
	// 	page {
	// 		background-color: #ffffff;
	// 	}
	// 
</style>
